<template>
    <div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我是有底线的"
          @load="onLoad"
          :immediate-check='false'
        >
            <van-cell v-for="data in datalist" :key="data.filmId" @click="handleClickPage(data.filmId)">
              <img :src="data.poster" alt="">
              <div>
                <div class="title">{{data.name}} <span class="type">{{data.filmType.name}}</span> </div>
                <div class="content">
                  <div :class="data.grade?'':'hidden' ">观众评分：<span style="color:#ffb232;">{{data.grade}}</span></div>
                  <div class="actors">主演：{{data.actors|actorsFilter}} </div>
                  <div>{{data.nation}} | {{data.runtime}}分钟 </div>
                </div>
              </div>
            </van-cell>
        </van-list>
        <router-view></router-view>
    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
// Vue.filter('gradeFilter', (data) => {
//   if (data === undefined) return '暂无评分'
//   return data
// })

Vue.filter('actorsFilter', (data) => {
  if (data === undefined) return '暂无主演'
  // 用map映射的方法映射出想要的  再用join连接起来
  return data.map(item => item.name).join(' ')
})
export default {

  data () {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1
    }
  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=5137268`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      // console.log(res.data)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },
  methods: {
    onLoad () {
    // if 总长度匹配  禁用懒加载
      if (this.datalist.length === this.total && this.total !== 0) {
        this.finished = true
      }
      console.log('daodile')
      this.current++
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=5137268`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        // console.log(res.data)
        this.datalist = [...this.datalist, ...res.data.data.films]

        this.loading = false
      })
    },
    handleClickPage (id) {
    //   console.log(id)
      //   localStorage.href = '#/detail'
      this.$router.push({
        path: `/detial/${id}`,
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .van-list{
    .van-cell{
    overflow: hidden;
    padding: .9375rem;
      img{
      width: 4.125rem;
        float: left;
      }
      .title{
        font-size: 1rem;
        display: flex;
      }
      .content{
        font-size: .8125rem;
        color: #797d82;
        .actors{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 12.5rem;
        }
      }
    }
  }
  .hidden{
    visibility: hidden;
  }
  .type{
    font-size: 9px;
    color: #fff;
    background-color: #d2d6dc;
    height: 14px;
    line-height: 14px;
    padding: 0 2px;
    border-radius: 2px;
    display: block;
    margin: 3px;
  }
</style>
